<template>
  <a-modal :open="open" width="1300px" title="加工单据" centered @cancel="onCancel">
    <div class="w-full h-18 patient-info-header py-2 px-3 flex items-center mb-4 justify-between">
      <div class="flex items-center">
        <a-avatar :size="48" :src="avatarMan" />
        <div class="text-xl font-semibold max-w-28 min-w-20 truncate text-white ml-4">
          {{ saleData?.brName || '姓名' }}
        </div>
        <div class="text-white">
          <span class="ml-4 mr-4">{{ saleData?.brXb || '性别' }}</span>
          <span class="ml-4">{{ saleData?.brAge ? saleData?.brAge : '年龄' }}</span>
        </div>
        <div class="text-white ml-6 mr-38">{{ saleData?.mobile }}</div>
      </div>
      <div class="flex items-center mr-10">
        <LabelValue label="开单人" :width="150" label-class="text-white font-bold" value-class="text-white" :value="saleData.billingName" />
        <LabelValue label="经手人" :width="150" label-class="text-white font-bold" value-class="text-white" :value="saleData.handlerName" />
        <LabelValue label="验光医生" :width="150" label-class="text-white font-bold" value-class="text-white" :value="saleData.chkEmpName" />
        <LabelValue label="配镜医生" :width="150" label-class="text-white font-bold" value-class="text-white" :value="saleData.opticianDoctorName" />
      </div>
      <LabelValue label="取镜日期" :width="200" label-class="text-white font-bold" value-class="text-white" :value="saleData.takeTime" />
    </div>
    <div class="w-full flex justify-between mb-4">
      <div class="w-7/12">
        <BaseTitle title="最终处方" />
        <a-divider class="mt-2 mb-2" />
        <PreTable :resource-data="prescriptionData" :long-or-short="longOrShort" @success="onSuccessPrescript" />
      </div>
      <div class="w-5/12 ml-4">
        <BaseTitle title="加工项目" />
        <a-divider class="mt-2 mb-2" />
        <div class="h-66">
          <div v-for="(item, index) in tableData" :key="index" class="h-20 right-border-pro mb-3">
            <div v-if="index === 0" class="w-full border-primary">
              <div class="flex mt-3 ml-2 items-center">
                <div v-if="index === 0" class="font-bold w-14">镜架</div>
                <div class="w-32 ml-4 truncate">{{ item.payItemName }}</div>
                <div class="w-16 ml-2">
                  {{ item.num }} <span class="text-gray-400 ml-2">{{ item.unit }}</span>
                </div>
                <!-- <LabelValue v-if="item.bh === '60'" label="瞳距" :width="110" label-class="ml-8" :value="item.pupilDistance5" /> -->
                <LabelValue v-if="item.bh === '60'" label="型号" :width="150" tooltip="true" label-class="ml-6" :value="item.skuModelNumber" />
              </div>
              <div v-if="item.bh === '60'" class="flex mt-2 ml-2">
                <LabelValue label="规格" :width="170" :value="item.specification" />
                <LabelValue label="颜色" :width="150" label-class="ml-6" :value="item.skuColor" />
              </div>
            </div>
            <div v-if="index !== 0" class="h-full w-full border-primary">
              <div class="h-full flex ml-2 items-center">
                <div v-if="index !== 0 && item.eyesType === '2'" class="font-bold w-14">OD-镜片</div>
                <div v-if="index !== 0 && item.eyesType === '1'" class="font-bold w-14">OS-镜片</div>
                <div class="w-32 ml-4 truncate">{{ item.payItemName }}</div>
                <div class="w-16 ml-2">
                  {{ item.num }} <span class="text-gray-400 ml-2">{{ item.unit }}</span>
                </div>
                <LabelValue v-if="item.bh === '61' || item.bh === '63'" label="折射率" :width="110" label-class="ml-8" :value="item.refractiveIndex" />
                <!-- <LabelValue v-if="item.bh === '61' || item.bh === '63'" label="轴向" :width="150" tooltip="true" label-class="ml-6" :value="item.axial" /> -->
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <a-form :model="formState" class="form-style-flex">
      <a-row class="w-full">
        <a-col :span="6">
          <a-form-item label="瞳高(OD)">
            <SelectTable
              v-model:value="formState.odPhEmpName"
              type="员工"
              placeholder="请选择"
              @select="
                (event) => {
                  formState.odPhEmpId = event.empId
                  formState.odPhEmpName = event.empName
                }
              "
            />
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="瞳高(OS)">
            <SelectTable
              v-model:value="formState.osPhEmpName"
              type="员工"
              placeholder="请选择"
              @select="
                (event) => {
                  formState.osPhEmpId = event.empId
                  formState.osPhEmpName = event.empName
                }
              "
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-form-item label="加工人" class="w-1/4">
        <SelectTable
          v-model:value="formState.processId"
          type="员工"
          placeholder="请选择"
          @select="
            (event) => {
              formState.processId = event.empName
              formState.processName = event.empId
            }
          "
        />
      </a-form-item>
      <a-form-item label="质检人" class="w-1/4">
        <SelectTable
          v-model:value="formState.inspectorId"
          type="员工"
          placeholder="请选择"
          @select="
            (event) => {
              formState.inspectorId = event.empName
              formState.inspectorName = event.empId
            }
          "
        />
      </a-form-item>
      <a-form-item label="摘要" class="w-1/2">
        <a-input v-model:value="formState.summary" placeholder="请输入" />
      </a-form-item>
      <a-form-item label="说明" class="w-full">
        <a-textarea v-model:value="formState.memo" :rows="3" placeholder="请输入" />
      </a-form-item>
    </a-form>
    <template #footer>
      <a-button key="back" @click="onCancel">取消</a-button>
      <a-button type="primary" :loading="loading" @click="onOk">保存</a-button>
    </template>
  </a-modal>
</template>
<script setup>
import { ref, watch } from 'vue'
import { message } from 'ant-design-vue'
import { post } from '@/utils/request'
import useUserStore from '@/store/user'
import avatarMan from '@/assets/images/avatar-man.png'
import PreTable from './components/PreTable'

const { empId, empName } = useUserStore()
const emit = defineEmits(['update:open', 'ok'])
const props = defineProps({
  open: {
    type: Boolean,
    default: false
  },
  rowData: {
    type: Object,
    default: () => ({})
  }
})
const saleData = ref({})
const tableData = ref([])
const longOrShort = ref('')
const formState = ref({
  odPhEmpId: '',
  osPhEmpId: '',
  processName: '',
  inspectorName: '',
  summary: '',
  memo: ''
})
const loading = ref(false)
const prescriptionData = ref({})
const rulesState = ref({})
const { resetFields } = useForm(formState, rulesState)
watch(() => {
  if (props.open) {
    formState.value.processName = empId
    formState.value.processId = empName
    formState.value.inspectorName = empId
    formState.value.inspectorId = empName
    getData()
  } else {
    formState.value = {
      odPhEmpId: '',
      osPhEmpId: '',
      processName: '',
      inspectorName: '',
      summary: '',
      memo: ''
    }
  }
})
const onCancel = () => {
  emit('update:open', false)
  resetFields()
}
const getData = async () => {
  const { code, data, msg } = await post('/optometry/ooadolescentcheck/getOoProcessRecordCheckResponse', {
    id: props.rowData.id,
    ooLsh: props.rowData.ooLsh
  })
  if (code !== 0) return message.error(msg)
  saleData.value = data
  formState.value.processName = data.processId
  formState.value.processId = data.processName
  formState.value.inspectorName = data.inspectorId
  formState.value.inspectorId = data.inspectorName
  formState.value.odPhEmpId = data.odPhEmpId
  formState.value.odPhEmpName = data.odPhEmpName
  formState.value.osPhEmpId = data.osPhEmpId
  formState.value.osPhEmpName = data.osPhEmpName
  formState.value.memo = data.memo
  formState.value.summary = data.summary
  longOrShort.value = data.longOrShort
  if (data.id) formState.value.id = data.id
  prescriptionData.value = data.ooFinalCheckResponse || {}
  if (data.list && data.list.length > 0) {
    tableData.value = []
    const jData = data.list.filter((item) => {
      return item.bh === '60'
    })
    if (jData && jData.length > 0) tableData.value.push(jData[0])
    const rightLensData = data.list.filter((item) => {
      return (item.bh === '61' || item.bh === '63') && item.eyesType === '2'
    })
    if (rightLensData && rightLensData.length > 0) tableData.value.push(rightLensData[0])
    const leftLensData = data.list.filter((item) => {
      return (item.bh === '61' || item.bh === '63') && item.eyesType === '1'
    })
    if (leftLensData && leftLensData.length > 0) tableData.value.push(leftLensData[0])
  } else {
    tableData.value = []
  }
}

const onPrint = async (id) => {
  const { code, msg, data } = await post('/optometry/ooadolescentcheck/getPrintOoProcessRecordResponse', { jgdh: id })
  if (code !== 0) return message.error(msg)
  window.openExe?.rpt(data) //调用winform打印
}

const onOk = async () => {
  loading.value = true
  const { code, data, msg } = await post('/optometry/ooadolescentcheck/doSaveOoProcessRecord', {
    ...formState.value,
    opticianRecordId: props.rowData.id,
    ooFinalCheckId: prescriptionData.value.id,
    odLongPh: prescriptionData.value.odLongPh,
    osLongPh: prescriptionData.value.osLongPh,
    odShortPh: prescriptionData.value.odShortPh,
    osShortPh: prescriptionData.value.osShortPh
  })
  if (code !== 0) {
    loading.value = false
    message.error(msg || '保存成功')
  } else {
    message.success('保存成功')
    onPrint(data?.id)
    onCancel()
    emit('ok')
    loading.value = false
  }
}
const onSuccessPrescript = (e) => {
  prescriptionData.value = e
}
</script>
<style lang="less" scoped>
.right-border-pro {
  border: 1px solid var(--primary-color);
  border-radius: 4px;
}
.patient-info-header {
  background-color: var(--primary-color);
  border-radius: 3px;
}
</style>
